\documentclass[a4paper,10pt]{article}
\usepackage[font=bf, large]{caption}
\usepackage[table]{xcolor}
\usepackage{amsmath}
\usepackage{amsfonts}
\usepackage{amssymb,tikz}
\usepackage{graphicx}
\usepackage{hyperref} %for clickable internet links
\usepackage{fancybox} %pour les encadr?s
\usepackage{fancyhdr} %pour les en-tetes
\usepackage{geometry,hhline}       % marges
\usepackage{multicol}
\usepackage{algorithm,algorithmic}
\usepackage[utf8x]{inputenc}
\usepackage[english]{babel}
%\usepackage{version} %pour le \begin{comment}...
%\usepackage{mathaccent}

\usepackage{float}	
\usepackage{booktabs}
\usepackage{subfig}
\usepackage{natbib,color}
\usepackage[nottoc, notlof, notlot]{tocbibind}
\bibliographystyle{plainnat}

\definecolor{Mygray}{gray}{0.85}


\newcommand{\indicator}[1]{\textbf{1}_{\lbrace {#1} \rbrace }}
\renewcommand{\baselinestretch}{1.4} %interlignes quadruples
% Marge exterieure plus grande
\geometry{hmargin=4cm,vmargin=3cm}

% Entete et pied de pages
\fancyhead{}            % efface le contenu de l'en-tete
\fancyfoot{}            % efface le contenu du pied de page

\fancypagestyle{mystyle}{
\lhead{\emph{Base de Données \& Web - Jypbook}}
\rhead{\includegraphics[height=1cm]{Logo_ENSAE.jpg}}
\renewcommand{\headrulewidth}{0.4pt}
\newcommand{\HRule}{\rule{\linewidth}{0.7mm}}
\cfoot{\thepage}
}
\pagestyle{mystyle}


%\makeatletter
%\def\@makechapterhead#1{%
  %{\parindent \z@ \raggedright \normalfont
    %\ifnum \c@secnumdepth >\m@ne
        %\huge\bfseries \@chapapp\space \thechapter
        %\par\nobreak
        %\vskip 20\p@
    %\fi
    %\interlinepenalty\@M
    %\Huge \bfseries #1\par\nobreak
    %\vskip 40\p@
 %}}
%\makeatother

\begin{document}
%----------------------------------------------------------------------
\begin{titlepage}
\begin{flushleft}
\includegraphics[width=4cm]{Logo_ENSAE.jpg}\\
\end{flushleft}
\Large 2011/2012\\
Third Year
		\vspace{3cm}

\begin{center}

\begin{minipage}{1\textwidth}
	\begin{center}
\vspace*{1cm}
 \Large{Base de Données \& Web}
\end{center}
\vspace*{1cm}
\HRule
\vspace*{1mm}
\hrule \vspace*{1cm}
\begin{center}
\includegraphics[scale=0.5]{logo.jpg}
\end{center}
\vspace*{1cm}

\hrule\vspace*{1mm}
\HRule
\end{minipage}

		\vspace{2cm}
   	\centerline{Gutierrez Pierre : Pierre.Gutierrez@ensae.fr}
   	\centerline{L'Hour Yanne-Edern : Yann.edern.lhour@ensae.fr}
   	\centerline{Ridgway James : James.Ridgway@ensae.fr}
		\vspace{0.5cm}
	\centerline{29 Juin 2012}
		\vspace{1cm}

\end{center}
\end{titlepage}
\section{Introduction}
Nous proposons une implémentation d'un site de la forme de Facebook\textsuperscript{\textregistered}, l'ensemble fait intervenir une base de données détaillé en section \ref{sec:s1}. Le site alors géré de manière dynamique en utilisant majoritairement du PHP les remarques relatives à ce dernier sont décrites dans la  section \ref{sec:s2}. 	

\section{Cahier des charges}
Nous réalisons ici un site de la forme de Facebook, c'est à dire que le site gère l'inscription, la gestion des amitiés, et le traitement des message et commentaire. De surcroit nous nous intéressons au passage à quelques problèmes de sécurité par exemple au injection SQL et au cross scripting. Un travail sur l'esthétique du site est aussi entrepris de manière a obtenir un structure cohérente entre pages. 

En outre nous devons nous assurer d'avoir une base de données dont l'utilisation ne nécessitera aucune modification de sa structure. C'est ce qui sera présenté dans la section suivante.
\section{Base de données}
\label{sec:s1}

Le cahier des charges précédent permet donc de dessiner le schéma relationnel de la figure \ref{relatio}.

\begin{figure}[h!]
\begin{center}
\includegraphics[height=6cm]{relationnel.png}
\caption{Schéma relationnel}
\label{relatio}
\end{center}
\end{figure}

Ce schéma relationnel nous indique quelles bases créer : nous travaillons avec trois bases : "user", "friendship" et "message". La base user contient les informations sur chaque utilisateur : id auto incrémentée, mail, mot de passe, nom, prénom, choix de la photo, etc. \\ 

Pour gérer les amitiés nous utilisons la base friendship qui contient quatre colonnes : id1, id2, accept1 et accept2. Une amitié stockée de la façon suivante : les deux identifiants des utilisateurs concernés, et un '1' dans 
chaque colonne "accept". Pour simplifier les requêtes futures, lors de la création d'une amitié, on écrit dans la base les deux lignes iduser1 $=>$ iduser2 et iduser2 $=>$ iduser1. Lors d'une "friend request" on crée donc deux lignes avec un 1 dans la colonne accept correspondant au demandeur et 0 dans l'autre colonne accept. Si la requête est acceptée, le zéro devient un 1. Si elle est "ignore" ou qu'on décide de supprimer un ami, les lignes concernées sont supprimées. Cela signifie que l'on peut retenter d'être ami avec quelqu'un qui nous a supprimé de sa liste ou a ignoré notre demande. \\

Enfin, nous utilisons une dernière base pour la gestion des messages. Un message classique a besoin d'un identifiant (id auto-incrémentée ici), l'id de l'envoyeur, l'id du receveur, la date et son contenu. Nous avons ajouté à cela  une colonne 'idfather' pour pouvoir gérer les commentaires : un commentaire est pour nous un message avec un message père (la colonne correspond donc à l'id du message commenté). Un message non commentaire aura un 0 ou un NULL dans cette colonne.  

Ces informations sont résumées dans la table \ref{tables}.


\begin{table}
\centering
\includegraphics[height=4cm]{tables.png}
\caption{Bases de données utilisées}
\label{tables}

\end{table}

\section{Structure du site}
\label{sec:s2}
Nous travaillons en nous basant sur le fichier ``main.php'' qui gère l'appel a toutes les autres pages. Le site permet de répliquer les principales fonctionnalité de Facebook:    
\begin{itemize}
\item Gestion des relations d'amitié
\item Messages
\item Edition du profil
\end{itemize}
 
Pour ce faire une fois connecté un booléen indiquant en variable de session ce qui permet d'accéder aux autre pages.  Ensuite l'accès aux différentes pages est permis par un passage dans l'URL avec la variable
``?page'', ainsi la page main.php recupère cette variable  et génère ``\$\_GET['page'].php''

Mis à part a la connexion, la page topbar.php est de surcroit toujours généré, cette dernière agit comme bannière et permet l'accès aux différentes pages. Lorsqu'un individu déjà inscrit ou après inscription se connecte il est redirigé sur sa page de profil à partir de laquelle il peut, rechercher des amis, écrire des message, vérifier si des gens l'ont demandé en ami (logo et compteur dans topbar.php), accéder a la page home.php où sont affichés les messages en rapport avec lui (la possibilité de modifier son profil est aussi disponible: photo, informations générales et suppression).

De la page profil l'utilisateur peux donc rechercher des amis : une liste d'amis est alors fournie correspondant à sa requête. Cette liste est associé a différentes actions selon la relation:
\begin{enumerate}
\item Ajouter un ami
\item Accepter un demande	
\item Ne rien faire (si déja ami)
\end{enumerate}
Les Actions et l'affichage de la liste sont une interaction direct avec la base de données. La page permet également un accès au profil des différents individus. Cette page est différente de celle de la personne connecté puisque on ne doit pas pouvoir modifier la page. Ainsi ici aussi un flag devra être utilisé pour savoir si les combo box et input box sont chargés. Cette variable ne doit pas être accessible à l'utilisateur ceci résulterait dans un faille exploitable pour supprimer les profils de ses amis.  

L'ajout d'un ami se fait par l'ajout de deux lignes dans la la base de données, ceci permet de plus facilement gérer l'asymétrie de l'amitié jusqu'à ce que  la personne accepte. Ainsi les deux dernière colonnes de la table sont différentes (0,1) ou (1,0) si il n'y pas de réponse d'un des individus et (1,1) après acceptation. On peut facilement vérifier si une demande d'un amis a été effectuée depuis le dernier rafraichissement de la page.

La page home permet un commentaire des messages publiés sur la page profil de chaque personne. Les messages et commentaires sont écrits en cascade en utilisant la variable id\_fater et la date comme décrit dans la section base de données. On peux accéder au message et commentaire de ses amis et interagir avec d'autres individus inscrits. 



\subsection{Securité}
Pour éviter les injections SQL on propose d'utiliser la fonction ``mysql\_real\_escape\_string'' qui permet de ne pas considérer un certain nombre de caractères spéciaux. Ceci permet donc d'éviter l'envoi d'élément de code SQL dans les ``inputs box'' des différentes pages. En effet ce genre de manipulations peux permettre a un individu de modifié ou d'explorer la base de donnés. La fonction permet de supprimer de la chaine les caractères suivants:
\begin{itemize}
 \item $\backslash$x00
\item $\backslash$n
\item $\backslash$r
\item $\backslash$
 \item '
\item " 
\item $\backslash$x1a
\end{itemize}

Cette procédure permet de protéger des injections SQL en supposant que nous n'avons pas oublié certaines inputbox. Ceci permet d'éviter que des requête du type ``nom' or 1=1; Drop table user;'' puissent être entrée. Cette requête permettrait d'afficher toute la table sans contrainte ("OR 1=1" est toujours vrai), et de supprimer la table user ensuite.

 En revanche il semble demeurer des vulnérabilités au cross scripting (XSS). Par exemple un individu pourrait s'inscrire avec pour nom ``$<$script$>$alert("je t'ai volé tes cookies");$<$/script$>$'', dans ce cas une alerte s'afficherait dès que le nom de la personne aurait du s'afficher. Ceci est potentiellement dangereux, un individu peut par exemple voler des cookies de tous les individus se connectant sur son profil ou recherchant son prénom! Il semble que la fonction ``htmlspecialchars'' permetterait de résoudre cela.  


Pour le stockage des mots de passe, nous nous proposons d'utiliser un cryptage, basé sur la fonction ``md5''. On appelle ce type de fonction une fonction de hashage, c'est à dire une fonction qui renvoi pour tout ``string'' entré un mot de taille fixe (dans notre cas 128bits). Ainsi par exemple le mot \texttt{test}~devient:

\texttt{098f6bcd4621d373cade4e832627b4f6}. Cela permet de garder un niveau de confidentialité même au niveau de l'administrateur système.

Dès que jugé nécessaire, des variables sessions ont été utilisées pour éviter des manipulations de l'URL. En effet seules les donnés non sensible sont transmise par une méthode post, c'est le cas de la page sur laquelle on se trouve, et  des requêtes de recherche qui sont entrés par l'utilisateur de toute façon. 

\subsection{Styles et CSS}
Un effort a été réalisé afin d'imiter l'apparence du site via des mise en page et des styles correspondant au site original Facebook. Dans un premier temps les caractéristiques de couleurs et de forme des éléments de la page ont été copiés pour partie à partir d'un site les décrivant et fournissant même une base de fichier de style CSS~: \url{http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/}.

Dans un deuxième temps le fichier de style CSS a été complété en analysant directement le site Facebook en tant qu'utilisateur grâce à Firefox qui permet d'un simple clic droit sur n'importe quelle page web d'"Exmainer la page". Cette opération permet de consulter d'une part le code html qui génère la page en cours mais aussi en se baladant au pointeur de la souris sur différents éléments de la page d'en obtenir les propriétés de styles, dans un autre volet du navigateur.

Hormis quelques recherches de sources annexes (e.g. \texttt{w3school.com}) cette deuxième étape d'appropriation des styles a été cruciale et a permis de comprendre la structure CSS d'une page Facebook pour ensuite l'implémenter. Ainsi, les sections de chaque page sont divisées par les balises \texttt{<DIV>} (ou de façon minoritaire \texttt{<SPAN>}) et chaque élément de page se trouve balisé par un wrapper ou conteneur qui l'englobe. Cela permet l'agencement de la bannière ("topbar.php") présente sur chaque page ainsi que des différentes parties de la page : topbar ; colonne gauche / colonne droite ; groupe de messages ; liste d'utilisateurs etc...

Par ailleurs, conformément aux standards CSS, le type de style \texttt{id}  a été préféré pour les éléments uniques d'une page (e.g. \texttt{\# fbtopbar \{... ; ... ; \} }) par rapport aux éléments de type \texttt{class}  qui ont plutôt été utilisés pour les éléments amenés à apparaître de multiples fois dans une même page (e.g. \texttt{.fbbutton\{ \} }).

Enfin, grâce à cette façon de procéder à la mise en style des pages, nous avons constaté que la compatibilité des navigateurs Internet Explorer et Chrome était toute aussi bonne que sous Firefox pour lequel le site a été conçu à la base.

\section{Conclusion}
Nous avons écrit un site fonctionnel qui reproduit les principales fonctionnalités de Facebook. Pour ce faire nous avons utilisé un système de versioning (\textit{SVN}) dont le projet est hébergé sur Google Code et distribué sous licence BSD (\url{http://code.google.com/p/jypbook/}). 

Certaines failles sécurité ont été traitées, en revanche l'injection de certain codes javascript dans les inputs box à la connexion, et sur l'écriture de message semble  toujours problématique. Un travail supplémentaire serait donc nécessaire pour rendre le site pleinement opérationnel.

\end{document}
